<template>
<div class="filmBox">
    <div class="header">
         <van-nav-bar left-arrow class="return" @click-left="onClickLeft"> 
            <template #right>
               <img :src="share1" class="share">
            </template>
         </van-nav-bar>
    </div>
    <div class="content">
      <div class="nav">
          <router-link to="" @click.native='change' tag="span">简介</router-link>
          <router-link to="/movie/moviedetail/filmReview" tag="span">影评<i>999+</i></router-link>
          <router-link to="" @click.native='change' tag="span">讨论</router-link>
          <router-link to="" @click.native='change' tag="span">更多</router-link>
      </div>
      <div class="audience">
         <div class="review">
             <div>观众热评</div>
             <div>写影评</div>
         </div>
         <div class="reviewInfo">
             <div class="reviewInfo1">
                 <div>全部</div>
                 <div>最新</div>
                 <div class="special">陪伴是最长情的告白<span>1902</span></div>
                 <div class="special">爱狗人士必看<span>1902</span></div>
                 <div>好评<span>5412</span></div>
                 <div>差评<span>69</span></div>
                 <div>点映<span>69</span></div>
                 <div>购票<span>5894</span></div>
                 <div>影评达人<span>45</span></div>
                 <div>同城<span>112</span></div>
             </div>
             <div class="arr"><van-icon name="arrow-down"  /></div>
         </div>
      </div>
      <div class="yelp" v-for="(item,index) in list" :key="index">
          <div class="yelpTop">
              <img class="profilePhoto" :src="item.user" alt="">
              <div class="userYelp">
                  <p>{{item.username}}</p>
                  <p>
                    <img class="gradeImg" :src="grades">
                    <img class="gradeImg" :src="grades">
                    <img class="gradeImg" :src="grades">
                    <img class="gradeImg" :src="grades">
                    <img class="gradeImg" :src="grade">
                  </p>
              </div>
              <div class="circle">
                   <span></span>
                   <span></span>
                   <span></span>
              </div>
          </div>
          <div class="yelpMiddle">
              {{item.des}}
          </div>
          <div class="yelpBottom">
              <div class="yelptime">
                  <span>05-17</span>
                  <span>09:34</span>
              </div>
              <div class="yelpview">
                  <div class="yelpinfo">
                      <img class="yelpviewImg" :src="dz"><span>56</span>
                  </div>
                   <div class="yelpinfo">
                       <img class="yelpviewImg" :src="info"><span>1</span>
                   </div>
              </div>
          </div>
      </div>
    </div>
    <div class="bottom">
       <van-button type="primary" size="large">特惠选座</van-button>
   </div>
</div>
</template>

<script>
import grades from  "@/assets/images/moviesdec/grade.png"
import grade from  "@/assets/images/moviesdec/grade02.png"
import share1 from "@/assets/images/filereview/share.png"
import user1  from "@/assets/images/filereview/user1.png"
import user2  from "@/assets/images/filereview/user2.png"
import user3  from "@/assets/images/filereview/user3.png"
import dz from "@/assets/images/filereview/dz.png"
import info from "@/assets/images/filereview/review.png"

export default {
data() {
return {
    grades,
    grade,
    dz,
    info,
   share1,
   list:[{
       user:user1,
       username:"yujia2754",
       des:"2002年，15岁的石原里美参加了HORIPRO公司第27回艺人新人选拔，获得最佳新人“完美少女”奖 。2003年2月15日，参演的爱情电影《小岛之恋》上映…",
   },{
       user:user2,
       username:"yujia2754",
       des:" 2002年，15岁的石原里美参加了HORIPRO公司第27回艺人新人选拔，获得最佳新人“完…"
   },{
       user:user3,
       username:"yujia2754",
       des:"2002年，15岁的石原里美参加了HORIPRO公司第27回艺人新人选拔。参演的爱情电影《小岛之恋》上映…"
   }]
}
},

methods:{
    onClickLeft(){
        this.$router.go(-1); 
    },
    change(){
        this.$router.go(-1)
    }
}
}
</script>
<style scoped lang="scss">
    .filmBox{
        height: calc(100vh);
         background-color:#22262D;
         .return{
            background-color: transparent;
         }
    }
    .header{
      margin: 0 40px;
    }
   .content{
      margin: 0 40px;
    }

    [class*=van-hairline]::after{
        border: 1px solid transparent;
    }
   /deep/  .van-nav-bar .van-icon{
    color: #fff
    }
   .van-nav-bar{
       padding-top: 50px;
       .share{
           width: 38.5px;
           height: 38.5px;
       }
   }
   .nav{
       margin-top: 40px;
       margin-bottom: 50px;
      span{
      display: inline-block;
      margin-right: 52px;
      font-size: 28px;
      line-height: 40px;
      opacity: 0.51;
      color: #FFFFFF;
     }
     span:nth-child(2){
         opacity: 1;
     }
     span:nth-child(2):after{
         display: block;
          content: '';
          width: 58px;
          height: 6px;
         background-image: linear-gradient(135deg, #F16481 0%, #F1906C 100%);
     }
     span:nth-child(2){
         position:relative;
         i{
           position: absolute;
            top: -8px;
            left: 56px;
           display: block;
           opacity: 0.51;
           font-size: 16px;
           color: #FFFFFF;
         }
     }
   }
   .review{
       display: flex;
       justify-content: space-between;
       align-items: center;
       div:nth-child(1){
          font-size: 36px;
          color: #FFFFFF;
       }
       div:nth-child(2){
          width: 108px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
          box-shadow: 0 0 8px 2px rgba(242,109,125,0.18);
          border-radius: 25px;
          font-size: 24px;
          color: #fff;
       }
   }
   .reviewInfo{
       margin-top: 40px;
       .reviewInfo1{
       display: flex;
       justify-content: flex-start;
       flex-wrap: wrap;
       div{
         height: 44px;
         line-height: 44px;
         margin-right:28px;
         text-align: center;
         font-size: 24px;
         color: #fff;
         border-radius: 19px;
         padding: 0 20px;
         background-color: #33363D;
         margin-bottom: 36px;
          span{
              padding-left:3px;
              opacity: 0.5;
              font-size: 20px;
              color: #FFFFFF;
              line-height: 20px;
          }
       }
       .special{
           border-radius: 19px 0 19px 19px;
           border: 2px solid rgba(242,123,119,0.28);
        }
      }
      .arr{
            opacity: 0.78;
            color: #FFFFFF;
            text-align: center;
            font-size: 40px;
        }
   }
   .yelp{
       position: relative;
       margin-top: 87px;
       color: #FFFFFF;
      .yelpTop{
          height: 100px;
          margin-bottom: 8px;
           .profilePhoto{
           float: left;
           width: 100px;
           height: 100px;
       }
       .userYelp{
           float: left;
           font-size: 28px;
           margin-left:28px ;
           p:nth-child(1){
             margin-bottom:14px;
           }
           p:nth-child(2){
              .gradeImg{
               float: left;
               width: 20px;
               height: 20px;
               margin-right: 8px;
              }
           }
       }
       .circle{
               position: absolute;
               top: 20px;
               right:0 ;
               height: 6px;
               span{
                   float: left;
                   display: block;
                   width: 6px;
                   height: 6px;
                   border-radius: 50%;
                   background-color: #fff;
                   margin-left: 8px;
               }
           }
      }
      .yelpMiddle{
          font-size:24px;
          line-height: 36px;
      }
      .yelpBottom{
        margin-top:22px;
        .yelptime{
            float: left;
            opacity: 0.51;
            font-size: 24px;
            span:nth-child(2){
                margin-left:5px
            }
        }
        .yelpview{
            float: right;
            .yelpinfo{
                float: left;
                margin-left: 8px;
            }
            .yelpviewImg{
                float: left;
                width: 36px;
                height: 35px;
                margin-right:13px ;
            }
        }
      }
   }
   .bottom{
        .van-button{
            background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
            box-shadow: 0 0 8px 2px rgba(242,109,125,0.18);
            border-radius: 12px;
            height: 100px;
            font-size: 36px;
            border: 0;
            margin-top: 20px;
        }
    } 
</style>